<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器的使用</title>
</head>

<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <!-- 监听器监听数据的变化（Vue实例中data绑定的任何东西） 
            当data里值发生改变，就会触发
            当你希望在data值发生改变，你想要做些事情的时候
            键值对： 键：watch 值是一个对象
        -->
        <p>{{value}}</p>
        <button @click="change()">button</button>

        <p>{{price}}</p>
        <button @click="priceChange()">button</button>
        <p>比原价贵了{{expensive}}元</p>

        <p>{{obj.value}}</p>
        <button @click="changeObj()">button</button>

        <p>计算属性total：{{total}}</p>

        <p>{{name}}</p>
        <button @click="changeName()">button</button>
        <p>{{list}}</p>
        <button @click="changeList()">button</button>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                value: 100,
                price: 100,
                rePrice: 100,
                expensive: 0,
                name: "shane",
                list: [1, 2, 3],
                obj: {
                    //引用类型 vs 值类型
                    value: 1000
                }
            },
            methods: {
                change() {
                    this.value++
                },
                priceChange() {
                    this.price += 10
                },
                changeObj() {
                    this.obj.value++
                },
                changeName() {
                    this.name = "hello"
                },
                changeList() {
                    this.list.push(4)
                }
            },
            computed: {
                total() {
                    return this.value + this.price
                }
            },
            watch: {//监听器
                // key值必须和dataname相同
                //监听data绑定的value值,那么键的值也必须叫value
                //键值对中值的值必须是匿名函数
                value(newValue, oldValue) {//oldValue 是监听的数据变化之前的值，newValue是监听数据变化之后的值
                    // 参数可以省略
                    console.log("值发生了变化");
                    console.log("new:", newValue);
                    console.log("old:", oldValue);

                },
                // 案例：有个价格price，原价是100,价格加10块钱,最后页面显示与原价贵了多少钱？
                price(newValue, oldValue) {
                    // 现价-原价
                    this.expensive = newValue - this.rePrice
                },
                //复杂对象   简单的监听方式是没有办法监听对象的数据变化
                // obj(){
                //     console.log("obj的值发生变化");
                // }
                //深度监听，改用对象方式监听
                obj: {
                    deep: true,// 第一个键值对，deep 布尔类型 ，是深度监听的开关
                    handler(newValue, oldValue) {
                        //监听器的主体
                        // 参数是newValue, oldValue
                        // 参数可以省略
                        console.log("值发生了改变");
                        console.log(newValue);
                        console.log(oldValue);
                    },
                    immediate: true//立即执行监听器，进入页面直接运行监听器
                },
                //深度监听器简写
                "obj.value"() {
                    console.log(1111111111);
                },
                //我想监听计算属性
                total: function () {
                    console.log("计算属性发生了变化");
                },
                name() {
                    console.log("name值发生变化");
                },
                list() {
                    console.log("list值发生变化");
                }

            }
        })

        // 值类型
        let a = 10
        let b = a // 地址相同
        a = 11 //改变了一个地址
        console.log(b);//10

        //  引用类型
        let c = {
            name: "shane"
        }
        let d = c // c 和 d 共用一个内存地址，地址相同
        // Object.assign(c, { age: 10 })
        c = { age: 10 }  // 通过 赋值符号 创建了一个新的地址
        console.log(d);//???

        //js数组案例
        let p = [1,2,3]
        q = p
        p.push(4)
        console.log(q);//??


    </script>
</body>

</html>